<div id="category">
<img src="{$photo.image}" style="padding: 20px;" width="965px"/>


{literal}
<script language="JavaScript" type="text/javascript">
	var IsRepostsClick=false;
	function gebi(id) {return document.getElementById(id);}
</script>
{/literal}
<table width="100%">
    <tbody>
		<tr>
			<td valign="top">
				<div id="RightImageScrool" onmousedown="SetScroolSpeed(20);" onmouseup="SetScroolSpeed(7);" onmouseout="StopImagesPosition();" onmousemove="SetImagesPositionRight();" class="LeftScroolOff" ></div>
			</td>
			<td width="100%" align="center">
				<div id="FoneImagesDiv" style="overflow: hidden; width: 99%; height: 137px; position: relative; z-index: 3; text-align: left;">
					<div id="NewPhotosPreview" style="position: absolute; z-index: 2; left: 0px;">
						<table id="ImagesTable" width="1000">
							<tbody>
								<tr id="OtherPhotosTr">
										{foreach from=$photos item=doc}
									<td>
										<div class="cat_image">
											<div>
												<a href="/photo/{$cat.id}/{$doc.id}.html"><img src="{$doc.thumb}" 
												{if $photo.id == $doc.id}width="140px" height="120px"
												{else}width="120px" height="100px"
												{/if}/></a>
											</div>										
										</div>
									</td>
										{/foreach}
								</tr>
							</tbody>
						</table>
					</div>
				</div>
			</td>
			<td valign="top">
				<div id="LeftImageScrool" onmousedown="SetScroolSpeed(20);" onmouseup="SetScroolSpeed(7);" onmouseout="StopImagesPosition();" onmousemove="SetImagesPositionLeft();" class="RightScroolOff"></div>
			</td>
		</tr>
	</tbody>
</table>
</div>
{literal}
<script language="javascript" type="text/javascript">

var PlaySpeed=20, ScroolStep=7, CheckSpeed=500;

var SelPhotoN = 0, ListTimer, CheckTimer, PhotoTabN=0;

function ToRightImagesPosition() {
    if (gebi("NewPhotosPreview").offsetLeft+ScroolStep>0){
        StopImagesPosition();
        gebi("NewPhotosPreview").style.left='0px';
        LoadNewPhotos("right");
    }else{
        gebi("NewPhotosPreview").style.left=(gebi("NewPhotosPreview").offsetLeft+ScroolStep)+'px';
        if (gebi("NewPhotosPreview").offsetLeft>gebi("FoneImagesDiv").offsetWidth-gebi("NewPhotosPreview").offsetWidth){gebi("LeftImageScrool").style.visibility="";};
    }
}
function SetImagesPositionRight() {
  if (IsMovie==false){
    StopImagesPosition();
    gebi("RightImageScrool").className="LeftScroolOn";
    ListTimer=window.setInterval("ToRightImagesPosition()", PlaySpeed);
    IsMovie=true;
  }
  return false;
}

function ToLeftImagesPosition() {
    if (gebi("NewPhotosPreview").offsetLeft-ScroolStep<gebi("FoneImagesDiv").offsetWidth-gebi("NewPhotosPreview").offsetWidth)
    {
        StopImagesPosition();
        gebi("NewPhotosPreview").style.left=gebi("FoneImagesDiv").offsetWidth-gebi("NewPhotosPreview").offsetWidth+'px';
        LoadNewPhotos("left");
    }else{
        gebi("NewPhotosPreview").style.left=(gebi("NewPhotosPreview").offsetLeft-ScroolStep)+'px';
        if (gebi("NewPhotosPreview").offsetLeft<0){gebi("RightImageScrool").style.visibility="";};
    }
}

function SetImagesPositionLeft() {
  if (IsMovie==false){
    StopImagesPosition();
    gebi("LeftImageScrool").className="RightScroolOn";
    ListTimer=window.setInterval("ToLeftImagesPosition()", PlaySpeed);
    IsMovie=true;
  }
  return false;
}

function StopImagesPosition() {
    if (ListTimer!=null){window.clearInterval(ListTimer);}
    ListTimer=null;
    gebi("RightImageScrool").className="LeftScroolOff";
    gebi("LeftImageScrool").className="RightScroolOff";
    ScroolStep=7;
    IsMovie=false;
    return false;
}

function SetScroolSpeed(NewSpeed) {
    ScroolStep=NewSpeed;
    return false;
}
</script>
{/literal}